import { Button, Card, Input, Form, InputNumber, Radio,DatePicker,Select,message} from 'antd';
import { connect,history } from 'umi';
import React, { useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import moment from 'moment';
import { updateVip } from './service';
import db from '@/utils/localstorage';

const FormItem = Form.Item;
const { TextArea } = Input;

const BasicForm = props => {
  const { submitting,dispatch, currentVip,salesList,coachList } = props;
  const [form] = Form.useForm();
  useEffect(() => {
    if (dispatch) {
       dispatch({
        type: 'cubeVip/fetchVip',
        payload: {
          id:props.match.params.id
        },
      }).then(()=>{
        form.resetFields()
      })
      dispatch({
        type: 'cubeVip/fetchSales',
        payload: {
          empType:null,
        },
      })
      dispatch({
        type: 'cubeVip/fetchCoach',
        payload: {
          empType:2,
        },
      })
     }
   }, []);
  const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 7,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 12,
      },
      md: {
        span: 10,
      },
    },
  };
  const submitFormLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 10,
        offset: 7,
      },
    },
  };

  const onFinish = async () => {
    const hide = message.loading('正在更新');
    const values = await form.validateFields();
    try {
      if(values.birthday){
        values.birthday=moment(values.birthday).format('YYYY-MM-DD')
      }
      if(values.babybirthday){
        values.babybirthday=moment(values.babybirthday).format('YYYY-MM-DD')
      }
      values.id=props.match.params.id
      let result = await updateVip({ ...values });
      hide();
      if(result.code===0){
        message.success('更新成功');
        history.push(`/vip/center`)
        return true;
      }else{
        message.error(result.message);
        return false;
      }
    }catch(error){
      console.log(error)
      hide();
      message.error('更新失败，请重试');
      return false;
    } 
  };
  return (
    <PageHeaderWrapper>
      <Card bordered={false}>
        <Form
          style={{
            marginTop: 8,
          }}
          form={form}
          name="basic"
          initialValues={currentVip}
          // onFinish={(e)=>{
          //   console.log('2e>>>',e)
          //   onFinish()
          // }}
        >
          <FormItem
            {...formItemLayout}
            label="姓名"
            name="name"
            rules={[
              {
                required: true,
                message: '请输入会员姓名',
              },
            ]}
          >
            <Input placeholder="请输入"/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="性别"
            name="sex"
            rules={[
              {
                required: true,
                message: '请选择性别',
              },
            ]}
          >
            <Radio.Group>
                <Radio value="1">
                  男
                </Radio>
                <Radio value="2">
                  女
                </Radio>
              </Radio.Group>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="手机号码"
            name="phone"
            rules={[
              {
                required: true,
                message: '请输入手机号',
              },
            ]}
          >
            <Input placeholder="请输入" />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="昵称"
            name="nickname"
          >
            <Input placeholder="请输入" />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="生日"
            name="birthday"
          >
            <DatePicker style={{ width: '100%' }} format="YYYY-MM-DD" placeholder="选择时间"/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="身高"
            name="height"
          >
           <InputNumber
              min={0}
              style={{ width: '100%' }}
              formatter={value => `${value}cm`}
              parser={value => value.replace('cm', '')}
              />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="体重"
            name="weight"
          >
              <InputNumber
              min={0}
              style={{ width: '100%' }}
              formatter={value => `${value}kg`}
              parser={value => value.replace('kg', '')}
              />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="家庭住址"
            name="homeAddress"
          >
            <Input placeholder="请输入家庭地址" />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="工作住址"
            name="workAddress"
          >
             <Input placeholder="请输入工作地址" />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="来源"
            name="source"
          >
            <Select style={{ width: '100%' }} placeholder="请选择">
              {
                db.get("dictTypeList")&&db.get("dictTypeList")["member_source"].map((item,index)=><Select.Option value={item.value} key={index}>{item.label}</Select.Option>)
              }
            </Select>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="销售"
            name="salesId"
          >
           <Select style={{ width: '100%' }} placeholder="请选择">
              {
                salesList&&salesList.map((item,index)=><Select.Option value={item.userId} key={index}>{item.name}</Select.Option>)
              }
            </Select>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="教练"
            name="coachId"
          >
            <Select style={{ width: '100%' }} placeholder="请选择">
              {
                coachList&&coachList.map((item,index)=><Select.Option value={item.userId} key={index}>{item.name}</Select.Option>)
              }
            </Select>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="婚姻"
            name="isMarriage"
          >
            <Radio.Group>
                <Radio value="1">
                  是
                </Radio>
                <Radio value="2">
                  否
                </Radio>
              </Radio.Group>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="生育"
            name="isFertility"
          >
            <Radio.Group>
                <Radio value="1">
                  是
                </Radio>
                <Radio value="2">
                  否
                </Radio>
              </Radio.Group>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="宝宝生日"
            name="babybirthday"
          >
            <DatePicker style={{ width: '100%' }} format="YYYY-MM-DD" placeholder="选择时间"/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="病史说明"
            name="medicalHistoryDescription"
          >
            <TextArea rows={4} placeholder="请输入" />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="备注"
            name="bz"
          >
            <TextArea rows={4} placeholder="请输入" />
          </FormItem>
          <FormItem
            {...submitFormLayout}
            style={{
              marginTop: 32,
            }}
          >
            <Button type="primary" loading={submitting} onClick={onFinish}>
             提交
            </Button>
            <Button
              style={{
                marginLeft: 8,
              }}
              onClick={()=>window.history.back()}
            >
              返回
            </Button>
          </FormItem>
        </Form>
      </Card>
    </PageHeaderWrapper>
  );
};

export default connect(({ loading, cubeVip }) => ({
  submitting: loading.effects['cubeVip/update'],
  currentVip: cubeVip.currentVip,
  salesList: cubeVip.salesList,
  coachList: cubeVip.coachList
}))(BasicForm);
